<template>
  <div class="root">
    <el-row :gutter="5">
      <el-col :span="5">
        <el-form ref="form"
                 :model="form"
                 label-width="100px"
                 style="width:600px"
                 enctype="multipart/form-data"

        >

          <el-form-item label="选择文件">
            <el-upload class="upload-xlsx"
                       :http-request="pushFile"
                       :on-change="handlechange"
                       :on-remove="handleremove"
                       action="#"
                       ref="upload"
                       accept=".xlsx"
                       :file-list="filelist"
                       :auto-upload="false"
            >
              <el-button slot="trigger"
                         size="small"
                         type="primary">选取文件</el-button>
              <!--                <div slot="tip"  class="el-uplad-tip">待写入的文件路径{{address}}</div>-->
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clickpush()">提交</el-button>
            <span >&#12288 &#12288</span>
            <el-checkbox v-model="checked" @change="onChange" id="cb">是否加急</el-checkbox>
            <!-- <el-button>取消</el-button> -->
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!--    v-loading="listLoading"-->
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="产品号" width="95" prop="date">
        <template slot-scope="techlist">
          <span>{{techlist.row.productionOrderNo}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="产品名称"  prop="date">
        <template slot-scope="techlist">
          <span>{{techlist.row.productName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="客户简称" width="95" prop="date">
        <template slot-scope="techlist">
          <span>{{techlist.row.custom}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标准件来料日期" width="95" prop="date">
        <template slot-scope="techlist">
          <span>{{techlist.row.standardDate}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="装配组" width="95" prop="date">
        <template slot-scope="techlist">
          <span>{{techlist.row.assemblyCrew}}</span>
        </template>
      </el-table-column>
      <el-table-column label="开工"  prop="name" width="100" >
        <template slot-scope="techlist">
          <span>{{techlist.row.isBegin}}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="250" align="center" prop="address">
        <template slot-scope="techlist">
          <span>{{techlist.row.remarks}}</span>
        </template>
      </el-table-column>


    </el-table>

  </div>

</template>


<script>

  import FileSelect from '../update/FileSelect.vue';
  import axios from 'axios';

  export default {
    components: {FileSelect},
    data() {
      return {
        list:[],
        techlist:[],
        dataForm:{
          name: '',
          file: null
        },
        hasfile:false,
        logoList: [],
        address: '',
        checked:false,
        filelist:[],
        form: {
          versionName:'',
          versionTag:'',
          name: '',
          file: null,
          color: '#ff0000'
        },
        imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [this.imgUrl],
        listLoading:false,
      };
    },
    created: function() {
      this.getfile2Path();
    },
    methods: {
      onChange(e){
        console.log(`checked"+ ${e.target.checked}`)
      },

      clickpush(){
        this.$refs.upload.submit();  //让httprequest执行,而不是去主动执行这个func
      },
      handleremove(file,filelist){
        if(!filelist.length){
          this.hasfile = false;
        }
        this.form.file = null;
      },
      handlechange(file,filelist){
        if(filelist.length ==1){
          this.hasfile = true;
        }
        this.form.file = file;
      },
      pushFile(val) {
        // this.$refs.upload.submit()
        //首先拿到地址
        if (val.file == null) {
          this.$message.warning('请先选择要上传的文件');
          return false;
        }
        //取出refs.upload中的文件
        // uploadFile = this.$refs.upload.submit();
        let formDParams = new FormData();
        formDParams.append('file', val.file);//filename是键 file是值
        formDParams.append('depart', "2");
        let config ={
          headers:{
            'Content-Type' : 'multipart/form-data'
          },
          transformRequest:[ function(data) {
            return data;
          }]
        };
        axios.post('/excel/importExcel',formDParams,config).then((res) => {
          console.log(res);
          if (res.data.code == "20000"){
            let arr = [...JSON.parse(res.data.data)];
            this.list = arr;
            // console.log(arr[0].technologydeparts);
            this.openM();
          }
        });

        // this.$http({
        //   url:'/web/push',
        //   headers: {'Content-Type': 'multipart/form-data;boundary=10'},//定义内容格式,很重要
        //   method: 'POST',
        //   formDParams
        // }).then(function(res) {
        //   debugger
        //   console.log(res);
        // });

      },
      openM() {
        this.$alert("解析成功");
      },
      publish(){
        //请求publish接口即可
        axios.get('/web/publishcold').then( (response) =>{
          debugger
          console.log(response.data);
          if(response.data.code == "20000"){
            this.openM()
          }
        });
      },
      getfile2Path(){
        this.$http.get('/web/getversion/main')
            .then(
                response => {
                  this.info = response.data;
                  console.log(this.info.data.filePath);
                  this.address = this.info.data.filePath;
                  // let strJ = JSON.parse(this.info)
                  // this.address = strJ.filePath
                  // // console.log('address',this.address)
                  // this.$message.info(this.address)
                  // console.log(this.address)
                }
            );
      }
    }
  };
</script>

<style>
  .choose-color{
    z-index: 9999;
    /* width: 210px; */
  }
  .line {
    text-align: center;
  }
  .img-wrap {
    width: 100%;
    height: 500px;
    margin-left: 68px;
  }
  .box{
    width: 220px !important;
  }
</style>
